<script lang="ts" setup>
import * as orderApi from "@/api/train/order";
import Sku from "@/components/sku.vue";
import OrderDetail from "@/components/order-detail.vue";

const props = defineProps<{
  /**
   * 订单号
   */
  orderNo: string;
}>();

const order = ref<OrderInfoResp | null>(null);

const loading = computed(() => !order.value);

const initData = async () => {
  const orderRes = await orderApi.getOrderByOrderNo(props.orderNo);
  console.log(orderRes.data);
  order.value = orderRes.data;
};

initData();

const handleCancel = async () => {
  const res = await orderApi.cancelOrder(props.orderNo);
  if (res.data === true) {
    order.value.status = 3;
  }
};
</script>

<template>
  <div class="min-h-screen bg-gray-1 py-3">
    <nut-skeleton width="250px" height="15px" animated :loading="loading">
      <!-- 商品卡片 -->
      <div class="m-3 mt-0 p-3 rd-lg bg-white">
        <!-- sku信息 -->
        <Sku v-if="order.skuInfo" :sku="order.skuInfo" />

        <!-- 包含服务 -->
        <div v-if="order.skuInfo?.skuBindList" class="mt-5">
          <span>包含服务: </span>
          <div v-for="item in order.skuInfo.skuBindList" :key="item.bindId">
            <span class="c-gray-4">{{ item.bindTitle }}</span>
          </div>
        </div>

        <!-- 购买数量 -->
        <div class="mt-5 flex justify-between">
          <span>购买份数</span>
          <span class="c-gray-4">{{ order.amount }}份</span>
        </div>
      </div>

      <!-- 订单详情卡片 -->
      <div class="m-3 mb-0 p-3 rd-lg bg-white">
        <h3 class="text-lg c-gray-7">订单详情</h3>
        <div>
          <OrderDetail :order="order" />
        </div>
      </div>

      <!-- 取消订单 -->
      <div class="px-5 py-5">
        <nut-button
          v-if="order.status === 1"
          type="danger"
          plain
          block
          @click="handleCancel"
          >取消订单</nut-button
        >
      </div>
    </nut-skeleton>
  </div>
</template>
